<template>
	<view class="container" :style="'overflow-y:visible;'">
		<view :style="'top: ' + searchTop + 'px'" class="search-goods-index-top" v-if="(arrPages.length > 0)">
			<input class="search-goods-index-top-input" placeholder="搜索商品" disabled @tap="onClickInput" />
			<!--上方输入框-->
			<view class="search-goods-index-top-icon">
				<image class="search-goods-index-top-icon-search" src="../../static/img/common/icon_search.png" />
			</view>
		</view>
		<view class="index_top">
			<swiper class="pages-swiper" indicator-dots="true" indicator-color="#F1E0E1" indicator-active-color="#FFF"
				autoplay="true" v-if="arrPages.length > 0">
				<swiper-item v-for=" item  in  arrPages " :key="item.iconUrl">
					<image :src="item.iconUrl" @tap="onSwiperJump(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<!--功能区-->
		<!-- <view class="guideContainer">
			<view class="txt-func" v-for=" item  in  arrFuns " :key="item.eventValueExt" @tap="onSwiperJump(item)">
				<image class="icon-func" :src="item.iconUrl"></image>
				<span class="tag_name">{{ item.name }}</span>
			</view>
		</view> -->
		<view class="moduledata_title">
			<image mode="widthFix" class="title_left" src="../../static/img/common/title_left.png"></image>
			<span class="moduledata_title_name">热门搜索</span>
		</view>
		<view style="width: 90%; padding: 0 5%; ">
			<span class="hot-title" v-for="item in hotSearchTags" :key="item.id" @tap="toModuleGoods(item)">{{item.name}}</span>
		</view>
		<view style="clear: both;">
			<block v-for=" item  in  homeRecommend " :key="item.moduleId">
				<view class="moduledata_title">
					<image mode="widthFix" class="title_left" src="../../static/img/common/title_left.png"></image>
					<span class="moduledata_title_name">{{ item.moduleName }}</span>
					<span @tap="toClassify(item.moduleId)" class="moduledata_title_more">
						查看更多
						<image mode="widthFix" class="more_icon" src="../../static/img/common/more_icon.png"></image>
					</span>
				</view>
				<view class="goods_square_container">
					<GoodsSquare class="goods_square_warp" :key="data.productId" v-for=" data  in  item.data "
						:item="data">
					</GoodsSquare>
				</view>
			</block>
		</view>
		<HotRecommend></HotRecommend>
		<shop-car />
	</view>
</template>

<script>
	import Big from 'big.js';
	import Goods from '../components/goods';
	import GoodsSquare from '../components/goodsSquare/index.vue';
	import HotRecommend from '../components/hotRecommend/index.vue';
	import {
		hallConfig
	} from '../../api/shop.js';
	import {
		homeRecommend,
		ProductModuleList
	} from '../../api/product.js';
	import {
		navigateTo,
		showToast
	} from '../../utils/promise.js';
	import ShopCar from '../../components/ShopCar/ShopCar.vue';
	export default {
		data() {
			return {
				title: 'Hello',
				arrPages: [], //轮播图
				arrFuns: [], //功能区
				arrModuleID: [], //存储顺序的模块ID
				arrModuleData: {}, //模块数据
				enableGoodsSelect: false, //商品选择弹版是否有效
				moduleNames: {},
				homeRecommend: [],
				hotSearchTags: [], // 热门搜索标签
				globalData: {
					navBarHeight: 0, // 导航栏高度
					menuBottom: 0, // 胶囊距底部间距（顶部间距也是这个）
					menuHeight: 0, // 胶囊高度
				},
				totalHeight: 14,
				searchTop: 0,
			}
		},
		components: {
			Goods,
			GoodsSquare,
			HotRecommend,
			ShopCar,
		},
		onLoad() {
			uni.removeStorage('selectAddressId');
			this.calcNavHeight();
		},
		onShow() {
			this.homeInit();
			this.productHomeRecommend();
			this.getHotSearchTags();
			this.calcNavHeight();
		},
		onShareTimeline() {
			return {
				title: '希尔顿酒店',
				imageUrl: '', // 可自定义图片，若图片URL为空则默认取小程序Logo
			};
		},
		methods: {
			//系统分享前，会先获取分享信息
			onShareAppMessage(res) {
				return {
					title: '希尔顿酒店',
					path: `pages/ShoppingList/index`,
					success: res => {}
				}
			},
			homeInit() {
				hallConfig({
					hallType: 1,
					hallField: "BANNER"
				}).then((res) => {
					// console.log(res)
					const {
						code,
						data
					} = res
					if (code !== 200) {
						showToast({
							title: "信息获取失败, 请重试"
						})
						return
					}
					this.arrPages = data.banner;
					this.arrFuns = data.module;
				}).catch((err) => {
					console.log(err)
				})
			},
			productHomeRecommend() {
				homeRecommend().then((res) => {
					// console.log(res)
					let {
						code,
						data
					} = res
					if (code !== 200) {
						showToast({
							title: "请求失败, 请重试",
						})
						return
					}
					data.forEach((i) => {
						i.data.forEach((j) => {
							j.originalPrice = new Big(j.originalPrice).div(100);
							j.currentPrice = new Big(j.currentPrice).div(100);
						})
					})
					data = data.filter((e) => e.data && e.data.length !== 0);
					this.homeRecommend = data;
				}).catch((err) => {
					console.log(err)
				})
			},
			toClassify(id) {
				navigateTo({
					url: `/pages/classification/index?moduleId=${id}`,
				})
			},
			onClickFunc(item) {
				navigateTo({
					url: `/pages/tagGoods/index?name=${item.name}&${item.eventValueExt}`
				})
			},
			onClickInput() {
				navigateTo({
					url: '/pages/searchGoods/index',
				})
			},
			onSwiperJump(e) {
				// console.log(e)
				let eventValueExt = {};
				if (e.eventValueExt) {
					let temp = e.eventValueExt.split('&');
					temp.forEach((f) => {
						eventValueExt[f.split('=')[0]] = f.split('=')[1]
					})
				}
				if (e.eventValue === 'wallet') {}
				if (e.eventValue === 'settingIndex') {}
				if (e.eventValue === "webViewCustom") {
					uni.navigateTo({
						url: '/subPage/webview/index?webviewUrl=' + eventValueExt.url,
					})
				}
				if (e.eventValue === 'bookshelfPage') {
					uni.navigateTo({
						url: '/pages/myProduct/index',
					})
				}
				if (e.eventValue === 'collectPage') {
					// uni.navigateTo({
					// 	url: '/pages/collect/index',
					// })
				}
				if (e.eventValue === 'history') {}
				if (e.eventValue === 'detail') {
					if (e.eventValueExt) {
						uni.navigateTo({
							url: '/pages/goodsDetail/index?productId=' + eventValueExt.paramId,
						})
					}
				}
				if (e.eventValue === 'classifyList') { //跳转分类
					uni.switchTab({
						url: '/pages/classification/index?moduleId=' + eventValueExt.paramId,
					})
				}
				if (e.eventValue === 'coupons') {
					uni.navigateTo({
						url: "/pages/coupon/index",
					})
				}
				if (e.eventValue === 'categoryList') {
					uni.navigateTo({
						url: '/pages/tagGoods/index?' + e.eventValueExt,
					})
				}
			},
			calcNavBarInfo() {
				// 获取系统信息
				const systemInfo = uni.getSystemInfoSync();
				// 胶囊按钮位置信息
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				// 导航栏高度 = 状态栏到胶囊的间距（胶囊上坐标位置-状态栏高度） * 2 + 胶囊高度 + 状态栏高度
				this.globalData.navBarHeight = (menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo
					.height + systemInfo.statusBarHeight;
				// 状态栏和菜单按钮(标题栏)之间的间距
				// 等同于菜单按钮(标题栏)到正文之间的间距（胶囊上坐标位置-状态栏高度）
				this.globalData.menuBottom = menuButtonInfo.top - systemInfo.statusBarHeight;
				// 菜单按钮栏(标题栏)的高度
				this.globalData.menuHeight = menuButtonInfo.height;
				//判断如果是小程序
				this.totalHeight = this.globalData.navBarHeight + this.globalData.menuBottom;
				this.searchTop = this.globalData.navBarHeight + this.globalData.menuBottom;
			},
			calcNavHeight() {
				uni.getSystemInfo({
					success: res => {
						let menuButtonInfo = {}
						if (res.platform === 'ios') {
							// ios设备的胶囊按钮都是固定的
							menuButtonInfo = {
								width: 87,
								height: 32,
								left: res.screenWidth - 7 - 87,
								right: res.screenWidth - 7,
								top: res.statusBarHeight + 4,
								bottom: res.statusBarHeight + 4 + 32
							}
						} else {
							// 安卓通过api获取
							menuButtonInfo = uni.getMenuButtonBoundingClientRect()
						}
						// 导航栏高度 = 状态栏到胶囊的间距（胶囊距上未知-状态栏高度）* 2 + 胶囊高度 + 状态栏高度
						this.globalData.navBarHeight = (menuButtonInfo.top - res.statusBarHeight) * 2 +
							menuButtonInfo.height + res.statusBarHeight;
						// 按钮上下边距高度
						this.globalData.menuBottom = menuButtonInfo.top - res.statusBarHeight;
						// 导航栏右边到屏幕边缘的距离
						this.globalData.menuRight = res.screenWidth - menuButtonInfo.right;
						// 导航栏高度
						this.globalData.menuHeight = menuButtonInfo.height;
						this.totalHeight = this.globalData.navBarHeight + this.globalData.menuBottom;
						this.searchTop = this.globalData.navBarHeight + this.globalData.menuBottom;
					},
					fail(err) {}
				})
			},
			getHotSearchTags() {
				ProductModuleList().then(res => {
					const { code, data } = res;
					if (code === 200 && data) {
						this.hotSearchTags = data;
					}
				}).catch(err => {
					console.log('获取热门搜索标签失败', err);
				});
			},
			toModuleGoods(item) {
				uni.navigateTo({
					url: '/pages/moduleGoods/index?moduleId=' + item.id
				})
			},
		}
	}
</script>

<style scoped>
	page {
		background-color: #f6f6f6;
		width: 100%;
		height: 100%;
	}

	.container {
		width: 100%;
		/* padding-top: 80rpx; */
		background-color: #f5f5f5;
		/* background-color: rgb(255,220,220); */
		/* #ifdef H5 */
		padding-bottom: 80rpx;
		/* #endif */

		/* background-image: url('https://cdn.realbook.com.cn/upload/65a8f984e4b02f3e8411359d.png'); */
		background-size: 100% auto;
		background-repeat: no-repeat;
	}

	.pages-swiper {
		width: 100%;
		height: 50vh;
		position: relative;
		margin-bottom: 40rpx;
		object-fit: fill;
	}

	.pages-swiper image {
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}

	.search-goods-index-top {
		width: 100%;
		/* position: fixed; */
		top: 0rpx;
		z-index: 3;
		height: 80rpx;
		padding: 10rpx 0;
		/* background-color: #fff; */
	}

	.search-goods-index-top-input {
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
		line-height: 36rpx;
		width: calc(91% - 60rpx);
		height: 80rpx;
		background: #FFF;
		border-radius: 25rpx;
		margin: 0 3%;
		padding-left: calc(3% + 60rpx);
	}

	.search-goods-index-top-icon {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 84%;
		margin: -54rpx 8% 0 8%;
		z-index: 1;
	}

	.search-goods-index-top-icon-search {
		width: 26rpx;
		height: 28rpx;
		z-index: 1;
	}

	.guideContainer {
		/* background: #fff; */
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	.tag_name {
		width: 100%;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		padding: 0 10rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		color: #999;
	}

	.guideContainer .icon-func {
		width: 100rpx;
		height: 100rpx;
		margin: 15rpx 0;
	}

	.guideContainer .txt-func {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		width: 25%;
		flex: 0 0 25%;
		margin-bottom: 25rpx;
		color: #333;
		font-size: 36rpx;
	}

	product-recommendation-list-component {
		margin-top: 20rpx;
	}

	.module_title {
		text-align: center;
		background-color: #fff
	}

	.home_popular {
		text-align: center;
		margin: 25rpx 0;
	}

	.home_popular_img {
		height: 80rpx;
		width: 315rpx;
	}

	.goods_square_container {
		/* background-color: #fff; */
		display: flex;
		flex-wrap: wrap;
		padding: 0 1%;
		justify-content: space-evenly;
	}

	.goods_square_warp {
		flex: 0 0 47%;
		background: #FFFFFF;
		box-shadow: 0rpx 9rpx 30rpx 0rpx rgba(6, 4, 3, 0.19);
		border-radius: 20rpx;
		margin-bottom: 4%;
	}

	.moduledata_title {
		/* background-color: #fff; */
		/* text-align: center; */
		padding: 20rpx 30rpx 30rpx;
		position: relative;
		height: 50rpx;
		color: #333;
		display: flex;
		font-size: 0;
		align-items: center;
	}

	.moduledata_title_name {
		flex: 1;
		font-size: 36rpx;
	}

	.moduledata_title_more {
		color: #999999;
		font-size: 24rpx;
	}

	.title_left {
		width: 8rpx;
		height: 31rpx;
		margin-right: 10rpx;
	}

	.more_icon {
		width: 14rpx;
		height: 15rpx;
		margin-left: 5rpx;
	}

	.title_bg {
		width: 315rpx;
		height: 48rpx;
		position: absolute;
		left: 0;
		right: 0;
		margin: 0 auto;
		bottom: 8rpx;
	}

	.index_top {
		position: relative;
		width: 94%;
		margin: 0 auto;
	}

	.look_more {
		text-align: center;
		padding: 15rpx 0;
		font-size: 36rpx;
		color: #333333;
		/* background-color: #fff; */
	}

	.look_more_img {
		width: 239rpx;
	}

	.hot-title {
		padding: 10rpx 30rpx;
		background-color: #fff;
		border-radius: 30rpx;
		font-size: 25rpx;
		display: block;
		float: left;
		margin-left: 5%;
		margin-top: 10rpx;
	}
</style>